<template>
  <div class="work-wrap">

    <div class="work-search">
      <div class="address-box" @click="searchCity">
        <img src="../../../images/location.png" class="pic1"/>
        <span class="address">{{town}}</span>
      </div>

      <div class="search-box">
        <input type="text" class="key" placeholder="请输入企业名称" @click="searchPage"/>
        <img src="../../../images/search.png" class="pic2"/>
      </div>
    </div>

    <div class="work-box">
      <!--轮播图-->
      <div class="carousel-box" id="picHeight">
        <swiper :options="swiperOption" class="work-carousel" ref="mySwiper" v-if=slideList.length>
          <swiper-slide v-for="(slide,index) in slideList" :key="index">
            <img :src="slide.mechanismUrl" class="carousel"/>
          </swiper-slide>
          <div class="swiper-pagination" slot="pagination"></div>
        </swiper>
      </div>


      <!--筛选-->
      <div class="screen-box" id="searchHeight" :class="{'roll-box':isFixed}">
        <span :class="{'screen-select':orderType == ''}" @click="queryType('')">全部</span>
        <span :class="{'screen-select':orderType == 3}" @click="queryType(3)">高工价</span>
        <span :class="{'screen-select':orderType == 8}" @click="queryType(8)">高返费</span>
        <span :class="{'screen-select':orderType == 4}" @click="queryType(4)">可借支</span>
      </div>

      <!--招工-->
      <van-list
        v-model="loading"
        :finished="finished"
        @load="onLoad"
        class="work-van"
      >
        <work-info :itemList="workList" @openRecruit="openRecruit"></work-info>

        <div class="empty-box" v-if="workList.length == 0 && !loading">
          <img src="./empty.png" class="empty"/>
        </div>
      </van-list>
    </div>

  </div>
</template>

<script>
  import workInfo from "../../../components/workinfo"
  import {queryWorkList} from '../../../axios/api'

  let vm = null;

  export default {
    data() {
      return {
        town: "",
        swiperOption: {
          notNextTick: true,
          pagination: {
            el: '.swiper-pagination',
            clickable: true,
          },
          autoplay: {
            delay: 3000,
            disableOnInteraction: false
          },
          loop: true,
          observer: true,
          observeParents: true,
          on: {
            click: function () {
              const realIndex = this.realIndex;
              vm.openRecruit(vm.slideList[realIndex].id);
            }
          }
        },
        slideList: [],
        workList: [],
        page: 1,
        size: 20,
        loading: false,
        finished: false,
        isFixed: false,//bar浮动
        offsetTop: 0,//触发bar浮动的阈值
        orderType: "",
        mechanismName: "",
        mark: true,
      }
    },
    created() {
      this.town = this.$route.query.town;
      if (this.town == "" || this.town == undefined || this.town == null) {
        this.town = "东莞全城";
      }
      vm = this;
    },
    mounted() {
      //计算高度
      let searchHeight = document.querySelector('#searchHeight').clientHeight;//搜索框高度
      let picHeight = document.querySelector('#picHeight').clientHeight;//轮播图高度
      this.offsetTop = picHeight + searchHeight;
      window.addEventListener('scroll', this.handleScroll);

    },
    methods: {
      queryType(index) {//根据条件查找(推荐好厂/高额返费)
        if (this.mark) {
          this.mark = false;
          this.orderType = index;
        } else {
          if (this.orderType == index) {
            this.mark = true;
            this.orderType = "";
          } else {
            this.mark = true;
            this.orderType = index;
          }
        }
        this.initVanList();
      },
      initVanList() {
        this.page = 1;
        this.size = 20;
        this.workList = [];
        this.loading = true;
        this.finished = false;
        if (this.loading) {
          this.onLoad();
        }
      },
      handleScroll() {//监听滚动条滚动的距离
        let scrollTop = window.pageYOffset || document.documentElement.scrollTop || document.body.scrollTop;
        if (scrollTop >= this.offsetTop) {
          this.isFixed = true;
        } else {
          this.isFixed = false;
        }
      },
      searchCity() {//根据城市搜索
        this.$router.push({path: "/citylist", query: {town: this.town}});
      },
      searchPage() {//根据企业名称搜索
        this.$router.push("/worksearch");
      },
      onLoad() {
        // 异步更新数据
        if (!this.timer) {
          this.timer = setTimeout(() => {
            this.getWorkList();
            this.timer = null;
          }, 500)
        }
      },
      getWorkList() {//查询招聘列表
        const params = {
          mechanismAddress: this.town,
          page: this.page,
          size: this.size,
          mechanismName: this.mechanismName,
          orderType: this.orderType
        };

        queryWorkList(params).then(res => {
          if (res.data.slideshowList != null && res.data.slideshowList.length > 0) {//热门企业
            this.slideList = res.data.slideshowList;

          }
          if (res.data.workList != null && res.data.workList.length > 0) {
            this.workList = this.workList.concat(res.data.workList);
            //加载状态结束
            this.loading = false;
            this.page++;
          } else {
            this.loading = false;
            if (this.workList.length >= res.data.workList.length) {
              this.finished = true;
            }
          }
        });
      },
      openRecruit(id) {//招工详情
        this.$router.push({path: "/workdetail", query: {id: id}});
      }
    },
    computed: {
      swiper() {
        return this.$refs.mySwiper.swiper;
      }
    },
    components: {
      workInfo
    }
  }
</script>

<style lang="less" scoped>
  @import "../../../assest/mixin";

  .work-wrap {
    .wh(100%, 100%);
    background: @talent-bg-color;
    .work-search {
      position: fixed;
      top: 0;
      z-index: 99;
      display: flex;
      align-items: center;
      .wh(100%, 1.2rem);
      background: @talent-bg-color;
      .address-box {
        display: flex;
        align-items: center;
        margin-left: 0.267rem;
        margin-right: 0.253rem;
        .pic1 {
          padding-right: 0.12rem;
          .wh(0.48rem, 0.48rem);
        }
        .address {
          .size-color(0.4rem, rgba(102, 102, 102, 1));
        }
      }
      .search-box {
        display: flex;
        align-items: center;
        flex: 1;
        margin-right: 0.32rem;
        .wh(7.787rem, 0.8rem);
        background: rgba(242, 242, 242, 1);
        .border-radius(0.387rem);
        .key {
          margin-left: 0.333rem;
          .wh(80%, 0.5rem);
          line-height: 0.5rem;
          .size-color(0.373rem, rgba(191, 191, 191, 1));
          background: rgba(242, 242, 242, 1);
        }
        .pic2 {
          margin-left: auto;
          margin-right: 0.24rem;
          .wh(0.48rem, 0.48rem);
        }
      }
    }
    .work-box {
      position: absolute;
      top: 1.2rem;
      bottom: 1.307rem;
      .wh(100%, auto);
      .work-carousel {
        .wh(100%, 4rem);
        .carousel {
          .wh(100%, 100%);
        }
      }
      .screen-box {
        display: flex;
        align-items: center;
        margin: 0 auto;
        .wh(94.93%, 1.28rem);
        span {
          .fj(center, center);
          flex: 1;
          margin-right: 0.48rem;
          height: 0.72rem;
          .size-color(0.373rem, rgba(153, 153, 153, 1));
          &:last-child {
            margin-right: 0;
          }
        }
        .screen-select {
          .size-color-weight(0.373rem, rgba(255, 145, 38, 1), 500);
          background: rgba(255, 245, 235, 1);
          .border-radius(0.36rem);
        }
      }
      .roll-box {
        position: fixed;
        top: 1.2rem;
        z-index: 99;
        display: flex;
        justify-content: center;
        .wh(100%, 1.28rem);
        background: @talent-bg-color;
      }
      .work-van {
        padding-bottom: 1.307rem;
        .empty-box {
          .fj(center, center);
          margin: 0 auto;
          padding-top: 0.453rem;
          .wh(5.707rem, 5.707rem);
          .empty {
            .wh(100%, 100%)
          }
        }
      }
    }
  }
</style>
